﻿<div class="control-group">
    <cms-field>
        <label class="control-label" for="{{vm.modelName}}">{{vm.title}}:</label>
        <div class="controls">
            <input type="hidden"
                   id="{{vm.modelName}}"
                   name="{{vm.modelName}}"
                   ng-model="vm.model"
                   ng-change="vm.onChange()" />

            <cms-table-container>
                <table>
                    <thead>
                        <tr>
                            <th ng-if="vm.previewFields.showImage">{{vm.imageColumnHeader}}</th>
                            <th ng-if="vm.previewFields.showTitle">{{vm.titleColumnHeader}}</th>
                            <th ng-if="vm.previewFields.showDescription">{{vm.descriptionColumnHeader}}</th>
                            <th>{{vm.typeColumnHeader}}</th>
                            <th cms-table-column-actions
                                ng-if="vm.formScope.editMode && !vm.readonly">Actions</th>
                        </tr>
                    </thead>
                    <tbody> 
                        <tr ng-if="!vm.model.length">
                            <td colspan="100" class="empty">None</td>
                        </tr>
                        <tr ng-repeat="item in vm.model track by $index"
                            ui-draggable="vm.formScope.editMode && vm.orderable"
                            data-drag="item"
                            data-drag-channel="nested-model-{{vm.modelName}}"
                            ui-on-drop="vm.onDrop($index, $data)"
                            on-drop-success="vm.onDropSuccess($index)"
                            data-drop-channel="nested-model-{{vm.modelName}}">
                            <td ng-if="vm.previewFields.showImage">
                                <cms-table-cell-image cms-image="vm.gridImages.images[$index]"></cms-table-cell-image>
                            </td>
                            <td ng-if="vm.previewFields.showTitle">
                                <strong>{{vm.getTitle(item, $index)}}</strong>
                            </td>
                            <td ng-if="vm.previewFields.showDescription">{{item.model[vm.previewFields[item.typeName].fields.previewDescription.lowerName]}}</td>
                            <td ng-if="vm.previewFields.showTitle">
                                {{vm.modelMetaDataLookup[item.typeName].displayName}}
                            </td>
                            <td cms-table-column-actions ng-if="vm.formScope.editMode && !vm.readonly">
                                <cms-button-icon cms-title="Edit"
                                                 cms-icon="pencil"
                                                 ng-click="vm.edit(item, $index)">
                                </cms-button-icon>
                                <cms-button-icon cms-title="Remove"
                                                 cms-icon="trash-o"
                                                 ng-click="vm.remove(item, $index)">
                                </cms-button-icon>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <cms-table-actions ng-if="vm.formScope.editMode && !vm.readonly && (!vm.maxItems || !vm.model || vm.model.length < vm.maxItems)">
                    <cms-menu cms-icon="plus-circle">
                        <cms-button ng-repeat="(typeName, modelMetaData) in vm.modelMetaDataLookup"
                                    cms-text="Add {{modelMetaData.displayName}}"
                                    ng-click="vm.add(modelMetaData)"
                                    ng-disabled="vm.gridLoadState.isLoading || vm.disabled"></cms-button>
                    </cms-menu>

                </cms-table-actions>
            </cms-table-container>
            <cms-form-field-validation-summary></cms-form-field-validation-summary>
        </div>
    </cms-field>
    <p class="help-inline" ng-if="vm.description">
        <small>{{vm.description}}</small>
    </p>
</div>